<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</head>
<body>


<div id="app">
    <div align="right">
        <template>
            <el-select v-model="value" placeholder="请选择"
            @change="change"
            >
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </template>
    </div>
    <br/>
    <hr color="bule"/>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>

</div>


<script type="text/javascript">

    let app = new Vue({
        el: "#app",
        data() {
            return {
                options: [{
                    value: 'ds',
                    label: '待收统计'
                },  {
                    value: 'hk',
                    label: '回款统计'
                }, {
                    value: 'yq',
                    label: '逾期统计'
                }],
                value: ''
            }
        },methods:{
            change:function (val) {
                let dataX=[];
                let dataY=[];
                let dataY2=[];
                axios.get("op/"+val,{emulateJSON: true},
                    {
                        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(reponse=>{

                    let tatleName='';
                    if(val=='ds'){
                        tatleName="待收统计";
                    }else if(val=='hk'){
                        tatleName="回款统计";
                    }else if( val=='yq'){
                        tatleName="逾期统计"
                    }
                    console.log(reponse)
/*                    alert(reponse.data[0].lendingDate)*/
                    for (let i=0 ; i<reponse.data.length;i++) {
                        let dt =new Date(reponse.data[i].lendingDate);
                        let amt=reponse.data[i].waitAmount;
                        let ins=reponse.data[i].waitInterest;
                        let datestr=dt.getFullYear()+"-"+(dt.getMonth()+1)+"-"+dt.getDate();
                       dataX.push(datestr);
                        dataY.push(amt);
                        dataY2.push(ins);
                    }
                    let myChart = echarts.init(document.getElementById('main'));
                    let option = {
                        title: {
                            text:tatleName
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['金额', '利息']
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data:dataX
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} 元'
                                }
                            }
                        ],
                        series: [
                            {
                                name: '金额',
                                type: 'line',
                                data: dataY
                            },
                            {
                                name: '利息',
                                type: 'line',
                                data:dataY2
                            }
                        ]
                    };

                    // 为echarts对象加载数据
                    myChart.setOption(option);
                })

            }
        }
    })

    let myChart = echarts.init(document.getElementById('main'));
    let option = {
        title: {
            text: '待收统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['金额', '利息']
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['2020-9-12', '2020-9-13', '2020-9-14', '2020-9-15', '2020-9-16', '2020-9-17', '2020-9-18']
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 元'
                }
            }
        ],
        series: [
            {
                name: '金额',
                type: 'line',
                data: [110000, 101000, 200500, 121443, 322423, 101000, 124324],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '利息',
                type: 'line',
                data: [92445, 134352, 114253, 176583,145252, 102352, 124123],
            }
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);





</script>
</body>